<template>
  <div id="app">
    <Navbar />
    <Carousel />
    <main>
      <h1>欢迎来到我们的网站</h1>
      <div class="content-container">
        <!-- 名师专家展示栏 -->
        <div class="expert-section">
          <div class="expert-header">
            <div class="section-title-group">
              <div class="title-and-more">
                <h2 class="section-chinese-title">名师专家</h2>
                <div class="more-button-container">
                  <a href="#" class="more-button">
                    <span>MORE>></span>
                  </a>
                </div>
              </div>
              <div class="divider-full">
                <div class="left-divider"></div>
              </div>
            </div>
          </div>
          <div class="expert-cards-container">
            <ExpertCard v-for="(expert, index) in experts" :key="index" :expert="expert" />
          </div>
        </div>
        <!-- 课程中心展示栏 -->
        <div class="course-section">
          <div class="course-header">
            <div class="section-title-group">
              <div class="title-and-more">
                <h2 class="section-chinese-title">课程中心</h2>
                <div class="more-button-container">
                  <router-link to="/course-center" class="more-button">
                    <span>MORE>></span>
                  </router-link>
                </div>
              </div>
              <div class="divider-full">
                <div class="left-divider"></div>
              </div>
            </div>
          </div>
          <div class="course-cards-container">
            <CourseCard v-for="(course, index) in courses" :key="index" :course="course" />
          </div>
        </div>
      </div>
    </main>
    <Footer />
  </div>
</template>

<script setup>
import Navbar from '@/components/Navbar/Navbar.vue';
import Carousel from '@/components/Carousel/Carousel.vue';
import Footer from '@/components/Footer/Footer.vue';
import ExpertCard from '@/components/ExpertCard/ExpertCard.vue';
import CourseCard from '@/components/CourseCard/CourseCard.vue';

// 模拟名师专家数据
const experts = [
  {
    imageUrl: '',
    name: '王伟涛',
    level: '高级讲师',
    yearsOfExperience: 15,
    introduction: '教学方向：电子通信类；计算机网络类；弱电智能化类；安防视频监控类。\n' +
        '评标评审范围：电子通信类；计算机网络类；弱电智能化类；安防视频监控类；电气自动化类；高低压设备类；仪器仪表类；医疗仪器类；节能环保类；土建装修类等。'
  },
  {
    imageUrl: '',
    name: '吴文轩',
    level: '中级讲师',
    yearsOfExperience: 8,
    introduction: '教学方向：智能和控制系统工程、机电一体化、计算机及网络设备、计算机系统软件、城市轨道交通工程'
  },
  {
    imageUrl: '',
    name: '王平',
    level: '初级讲师',
    yearsOfExperience: 3,
    introduction: '教学方向：工业互联网,5G,两化融合,计算机类集成,信息化工程,无线电监测,无线电检测。',
  },
  {
    imageUrl: '',
    name: '王丽婷',
    level: '资深讲师',
    yearsOfExperience: 20,
    introduction: '教学方向：信息安全,计算机硬件,大数据,计算机类集成,信息化工程。'
  }
];

// 模拟课程数据
const courses = [
  {
    imageUrl: '',
    description: '这是课程1的简介，主要讲解电子通信相关知识。',
    speaker: '王伟涛'
  },
  {
    imageUrl: '',
    description: '课程2专注于智能和控制系统工程。',
    speaker: '吴文轩'
  },
  {
    imageUrl: '',
    description: '本课程介绍工业互联网的应用。',
    speaker: '王平'
  },
  {
    imageUrl: '',
    description: '课程4涉及信息安全领域。',
    speaker: '王丽婷'
  }
];
</script>

<style scoped>
/* 整体页面布局 */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

main {
  padding: 20px 0;
  text-align: center;
}

.content-container {
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* 名师专家展示栏 */
.expert-section {
  width: 100%;
  margin: 20px auto;
  padding: 0 20px;
}

.expert-header {
  margin-bottom: 80px;
}

.section-title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.title-and-more {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 5px;
  line-height: 1;
}

.section-chinese-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 0;
  line-height: 2;
}

.divider-full {
  width: 100%;
  display: flex;
  align-items: center;
}

.left-divider {
  height: 2px;
  background-color: #007bff;
  flex: 1;
  margin-right: 0;
}

.more-button-container {
  display: flex;
  align-items: center;
}

.more-button {
  display: inline-block;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-bottom: 0;
  line-height: 1;
  transform: translateY(5px);
}

.more-button span {
  color: #9a9a9f;
  font-size: 16px;
  font-weight: bold;
  margin-left: 10px;
}

.more-button:hover span {
  color: #007bff;
  text-decoration: underline;
  text-decoration-color: #007bff;
  text-decoration-thickness: 2px;
  text-decoration-offset: 4px;
}

/* 专家卡片展示区域 */
.expert-cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

/* 课程中心展示栏 */
.course-section {
  width: 100%;
  margin: 20px auto;
  padding: 0 20px;
}

.course-header {
  margin-bottom: 30px; /* 减少课程标题与分割线之间的距离 */
}

.course-cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.course-item.course-info {
  text-align: left; /* 使课程描述左对齐 */
}

/* 响应式设计 */
@media (max-width: 992px) {
  .expert-cards-container .expert-item,
  .course-cards-container .course-item {
    width: calc(50% - 10px);
  }
}

@media (max-width: 576px) {
  .expert-cards-container .expert-item,
  .course-cards-container .course-item {
    width: 100%;
    margin-bottom: 20px;
  }
}
</style>